<template>
  <div style="display: flex; justify-content: center; margin-top: 200px">
    <div>
      <img
        style="width: 550px; height: 400px"
        src="../../assets/404_images/notFound.svg"
      />
    </div>
    <div style="margin-left: 30px">
      <div>
        <img
          style="width: 200px; height: 200px"
          src="../../assets/404_images/404.svg"
        />
      </div>
      <div>
        <p style="font-size: 15px; font-weight: 700">Oh~~您的页面好像飞走了~</p>
        <span
          style="
            font-size: 12px;
            color: #999;
            margin-top: 5px;
            display: inline-block;
          "
          >请检查您输入的网址是否正确，或者点击连接继续浏览</span
        >
        <p
          style="
            margin-top: 40px;
            font-size: 14px;
            color: #333;
            display: flex;
            cursor: pointer;
          "
        >
          <span
            @click="gohome"
            style="display: inline-block; height: 21px; line-height: 23px"
            >返回首页</span
          >
          <img src="../../assets/404_images/enter.svg" />
          <span style="margin-left: 30px" @click="back"
            >返回上一页 ({{ times }}s)</span
          >
        </p>
      </div>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapGetters } from "vuex";
export default {
  data() {
    return {
      times: 5,
      timer: null,
    };
  },
  computed: {
    ...mapGetters({
      getTagList: "getTagList",
      getCurrentPath: "getCurrentPath",
    }),
  },
  methods: {
    ...mapMutations({
      setCurrentPath: "setCurrentPath",
    }),
    gohome() {
      clearInterval(this.timer);
      this.setCurrentPath("home");
      this.$router.push({
        name: "home",
      });
    },
    back() {
      const router = this.getTagList.find(
        (item) => item.path === this.getCurrentPath
      );
      const name = router.name || router.path.substr(1);
      const params = router.params || {};
      const query = router.query || {};
      this.$router.push({ name, params, query });
    },
  },
  destroyed() {
    this.setCurrentPath(this.$route.path);
    clearInterval(this.timer);
  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.times === 1) {
        this.back();
        clearInterval(this.timer);
      }
      this.times--;
    }, 1000);
  },
};
</script>
